<template>
<div>
  <div>游戏：{{ game }}</div>
  <div>地址：{{ place }}</div>
  <div>水果：{{ friuts }}</div>
  <button @click="changeGame">修改游戏</button>
  <button @click="changeLocation">修改location</button>
  <button @click="changeD">修改d</button>
  <button @click="changePlace">修改place</button>
  <br>
  <button @click="changeFriuts">修改friuts</button>
  <button @click="changeA">修改A</button>
</div>
</template>

<script lang='ts' setup name='App'>
import {ref, reactive,shallowRef,shallowReactive} from "vue"
// 数据
// shallowRef和shallowReactive只能修改浅层次的place.friuts
let game=shallowRef("原神")
let place=shallowRef({
  location:"南京",
  area:{
    aa:"溧水区",
    b:{
      c:"石湫镇",
      d:"南京工业大学浦江学院"
    }
  }
})
let friuts=shallowReactive({
  location:"橙子",
  area:{
    a:"橙汁",
    b:{
      c:"橙子面包",
      d:"南京工业大学浦江学院"
    }
  }
})
// 方法
function changeGame(){
game.value="我的世界"
}
function changeLocation(){
  place.value.location="栖霞区"
}
function changeD(){
  place.value.area.b.d="江苏第二师范"
}
function changePlace(){
  place.value={ 
  location:"宁波",
  area:{
    aa:"鄞州区",
    b:{
      c:"石湫镇",
      d:"南京工业大学浦江学院"
    }
  }}
}
function changeA(){
  friuts.location="成"
}
function changeFriuts(){
  Object.assign("friuts",{ 
  location:"宁波",
  area:{
    a:"鄞州区",
    b:{
      c:"石湫镇",
      d:"南京工业大学浦江学院"
    }
  }})
}
</script>

<style scoped>

</style>